<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-12-17 11:35:26
-->
<template>
  <!-- 1. 容器 -->
  <div ref="left2_container" style="height:95%"> </div>
</template>

<script>
// 2. 导入图表构造函数
import { Pie, measureTextWidth } from '@antv/g2plot';
export default {
  mounted() {
    // 4. 页面渲染的时候初始化图表
    this.initChart()
  },
  methods:{
    //3. 初始化图表
    initChart(){
      // const data = [
      //   { type: '已绑定设备', value: 27 },
      //   { type: '未绑定设备', value: 25 },
      //   // { type: '报废', value: 2 },
      // ];
      // const piePlot = new Pie(this.$refs.left2_container, {
      //   appendPadding: 10,
      //   data,
      //   angleField: 'value',
      //   colorField: 'type',
      //   color: ['l(90) 0:#D1D1FF 1:#7C82EA', 'l(90) 0:#fccafb 1:#9c4dd5', 'l(90) 0:#c3faba 1:#36bb83'],
      //   radius: 0.8,
      //   legend:false,
      //   label: {
      //     formatter(v){
      //       return v.value+'个';
      //     },
      //     style:{
      //       fontSize: 16,
      //       type: 'outer',
      //       fill:'#fff'
      //     }
      //   },
      //   interactions: [{ type: 'element-active' }],
      // });

      // piePlot.render();
  function renderStatistic(containerWidth, text, style) {
  const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
  const R = containerWidth / 2;
  // r^2 = (w / 2)^2 + (h - offsetY)^2
  let scale = 1;
  if (containerWidth < textWidth) {
    scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
  }
  const textStyleStr = `width:${containerWidth}px;`;
  return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
}

const data = [
  { type: '已绑定', value: 27 },
  { type: '未绑定', value: 25 },
  { type: '其他', value: 18 },

];

const piePlot = new Pie(this.$refs.left2_container, {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  innerRadius: 0.64,
  meta: {
    value: {
      formatter: (v) => `${v} ¥`,
    },
  },
  label: {
    type: 'inner',
    offset: '-50%',
    style: {
      textAlign: 'center',
      
    },
    autoRotate: false,
    content: '{value}',
  },
  statistic: {
    title: {
      offsetY: -4,
      customHtml: (container, view, datum) => {
        const { width, height } = container.getBoundingClientRect();
        const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
        const text = datum ? datum.type : '总计';
        return renderStatistic(d, text, { fontSize: 26  });
      },
    },
    content: {
      offsetY: 4,
      style: {
        fontSize: '32px',
      },
      customHtml: (container, view, datum, data) => {
        const { width } = container.getBoundingClientRect();

        const text = datum ? ` ${datum.value}` : ` ${data.reduce((r, d) => r + d.value, 0)}`;
        return renderStatistic(width, text, { fontSize: 32 });
      },
    },
  },
  // 添加 中心统计文本 交互
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
});

piePlot.render();

    } 
  }
}
</script>